<template>
  <view>
    <!-- 顶层 -->
    <u-navbar leftText="返回" title="投诉建议" @leftClick="liftClick" :placeholder="true">
    </u-navbar>
    <!-- 按钮层 -->
    <view style="display: flex; justify-content: space-between; margin-bottom: 20rpx;">
      <div style="width: 200rpx;">
        <u-button style="width: 30rpx;" class="add-but" type="warning" icon="server-man" text="投诉/建议"
                  @click="addBut"/>
      </div>
      <div style="width: 300rpx">
        <u-subsection :list="list" @change="sectionChange"
                      fontSize="25rpx" activeColor="#fcbd71" :current="current"/>
      </div>
    </view>
    <!-- 投诉数据展示 -->
    <template v-for="com in complaints">
      <view class="mall-pintuan-products">
        <view class="message-item"
              style="padding: 10rpx; display: flex;">
          <u--image shape="circle" :src="com.ownerPort" width="60rpx" height="60rpx" @click="click">
          </u--image>
          <view style="flex: 1;margin-inline: 10px">
            <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5rpx;">
              <text style="font-weight: bold; font-size: 25rpx;" v-if="com.complaintSuggestType == 'Complaint'">投诉
              </text>
              <text style="font-weight: bold; font-size: 25rpx;" v-if="com.complaintSuggestType == 'Suggest'">建议
              </text>
              <text style="font-size: 20rpx; color: #999; ">{{ com.createTime }}</text>
            </view>

            <text class="message-text">
              内容：{{ com.complaintSuggestContent }}
            </text>
            <!-- 图片 -->
            <view v-if="com.complaintImgs!=null" style="margin-top: 10px">
              <div v-for="img in com.complaintImgs.split(',')">
                <image :src="img" style="width: 100rpx; height: 100rpx;float: left;margin-right: 6rpx"
                       @click=""/>
              </div>
            </view>
            <!--            状态-->
            <view style="float: right;margin-top: 60rpx">
              <u-icon size="20" name="trash" color="red" @click="deleteComplaint(com.complaintSuggestId)"/>
            </view>
          </view>
        </view>
      </view>
      <u-divider text="分割线" :dot="true"/>
    </template>
  </view>
</template>

<script>
export default {
  onShow() {
    this.selectAll();
  },
  data() {
    return {
      complaints: [],
      imgs: [],
      list: ['投诉', '全部', '建议'],
      current: 1,
      comType: "",

    }
  },
  methods: {
    selectAll() {
      let userId = uni.getStorageSync("ownerId");
      this.$http.get('/uni-app/zyComplaintSuggest/selectAllByOwnerId/' + userId, {comType: this.comType})
          .then(res => {
            this.complaints = res.data.data;
            // for (let i = 0; i < this.complaints.length; i++) {
            //   this.components[i].complaintImgs.
            // }
            console.log("数据获取成功")
          }).catch(err => {
        console.log("失败" + err)
      })
    },
    liftClick() {
      uni.navigateBack({
        delta: 1
      });
    },
    addBut() {
      uni.navigateTo({
        url: '/pages/complain/ComplainAddView'
      })
    },
    sectionChange(index) {
      this.current = index;
      console.log(this.current)
      if (this.current == 0) {//投诉
        this.comType = "Complaint";
        this.selectAll();
      } else if (this.current == 2) { //建议
        this.comType = "Suggest";
        this.selectAll();
      } else {
        this.comType = "";
        this.selectAll();
      }
    },
    deleteComplaint(comId) {
      console.log("触发删除：", comId);
      let that = this; // 保存this到变量that
      uni.showModal({
        title: '提示',
        content: '是否确定删除？',
        showCancel: true,
        cancelText: '取消',
        confirmText: '确定',
        success: function (res) {
          if (res.confirm) {
            that.$http.delete('/uni-app/zyComplaintSuggest/complaintDelete/' + comId)
                .then(res => {
                  that.selectAll();
                  that.$message({
                    message: '恭喜你，' + res.data.data,
                    type: 'success'
                  });
                }).catch(err => {
              console.log("删除失败" + err)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
        $message(param) {

        }
      });
    }

  },
  mounted() {
    this.selectAll();
  }

}
</script>

<style>
</style>
